<template>
  <div class="case-integral flex">
    <!--组织架构-->
    <div class="org-tree">
      <organization
        ref="organ"
        @onSearch="searchFun"
        @onClear="clearFun"
        :statisticalType="0"
        :source="'caseRate'"></organization>
    </div>
    <!--内容-->
    <div class="integral-content">
      <Form ref="formCustom" :label-width="100">
        <FormItem label="组织筛选：">
          <Select
            multiple
            style="width: 350px"
            v-model="rankDivisionIds"
            :max-tag-count="3"
            @on-change="serchChange">
            <Option
              v-for="option in orgList"
              :value="option.orgId"
              :key="option.orgId"
              :label="option.orgName" />
          </Select>
        </FormItem>
      </Form>
      <dt-search ref="search" :label-width="90" :xl="6" :xlBtn="12">
        <Button type="primary" v-if="unlocking('0207010601')" @click="exportShort">导出</Button>
        <Button type="primary" @click="exportShort1">导出考核明细</Button>
      </dt-search>
      <customTopListVue :fromType="'caseRate'" :topRocerdData="topRocerdData" @getClickData="getClickData" />
      <dt-grid ref="table" :columns="columns" :page="page" :onFetch="onFetch" />
    </div>
    <Modal v-model="modal" title="考核明细导出" @on-ok="ok" @on-cancel="cancel" ok-text="导出">
      <div class="moText" style="color: rgb(255, 123, 0)">
        考核时间说明：导出的考核明细统计范围只会在1个月内
        <br />
        例如，选择了导出8月7的考核明细，则考核统计范围为8月1日-8月7日
      </div>
      <div class="pick">
        <DatePicker
          type="date"
          v-model="countDate"
          :options="options1"
          format="yyyy-MM-dd"
          placeholder="请选择考核时间"
          @on-change="DatePickTimeChange"
          style="width: 200px; margin: 0 auto" />
      </div>
    </Modal>
  </div>
</template>
<script>
  import columnConfig from './components/caseRateColumn'
  import SearchOpt from './components/caseRateStatisticsOpt'
  import caseRateMgr from '@/biz/caseRate/caseRate'
  import organization from '../marketingStatistics/components/organzation.vue'
  import toolApi from '@/biz/base/tool'
  import customTopListVue from '@/components/customTopList.vue'
  export default {
    data() {
      return {
        modal: false,
        options1: {
          disabledDate(date) {
            // const currentDate = new Date()
            // currentDate.setDate(currentDate.getDate() - 1)
            // currentDate.setHours(23, 59, 59, 0)
            // const startOfCurrentMonth1 = new Date(2023, 7, 31)
            // return date > currentDate || date < startOfCurrentMonth1
          }
        },
        countDate: null,
        columns: [],
        page: {
          current: 1
        },
        // paramsMsg: {},
        orgCheck: {},
        buildingId: '',
        filterParams: {},
        exportParams: {},

        //3.11
        rankDivisionIds: [],
        formValidate: {
          mth: `${new Date().getFullYear()}${(new Date().getMonth() + 1).toString().padStart(2, '0')}`,
          houseName: ''
        },
        topRocerdData: {},
        orgList: [],
        grade: '',
        orgCheckFlag: true
      }
    },
    created() {},
    mounted() {
      this.getOrg()
      this.columns = columnConfig.headers(this)
      this.$refs.search.init(this.$refs.table, new SearchOpt(this), this.formValidate)
      this.$refs.table.init(this)
      // this.$refs.table.fetch()
      // this.getCount()
    },
    watch: {},
    components: {
      organization,
      customTopListVue
    },
    methods: {
      DatePickTimeChange(val) {
        this.countDate = val
        console.log(val, 'vvv')
      },
      ok() {
        this.exportParams.countDate = this.countDate
        caseRateMgr.exportDetails(this.exportParams)
        this.countDate = null
      },
      cancel() {
        this.countDate = null
      },
      timeChange() {
        this.$refs.table.fetch()
      },
      findShort(val) {
        this.$router.push({
          path: '/reportCenter/controlReport/caseRateDetails',
          query: {
            buildingId: val.housesId,
            housesName: val.houseName,
            timeVal: this.formValidate.mth
          }
        })
      },
      serchChange(val) {
        this.rankDivisionIds = val
        if (this.orgList && this.orgList.length) {
          const filteredOrgs = this.orgList.filter((item) => val.includes(item.orgId))

          this.$refs.organ.orgFilter(filteredOrgs)
        }
      },
      getOrg() {
        toolApi.getBuildingOrg().then((res) => {
          this.orgList = res

          let _inde = this.orgList.findIndex((item) => {
            return item.orgId == 2
          })
          if (_inde != -1) {
            this.rankDivisionIds = [2]
          } else {
            let orgIdList = []
            this.orgList.forEach((item) => {
              orgIdList.push(item.orgId)
            })
            this.rankDivisionIds = orgIdList
          }

          const filteredOrgs = this.orgList.filter((item) => this.rankDivisionIds.includes(item.orgId))
          this.$refs.organ.orgFilter(filteredOrgs)
        })
      },
      exportShort() {
        caseRateMgr.buildingGradeExport(this.exportParams)
      },
      exportShort1() {
        this.modal = true
      },
      // 获取点击顶部列表的key值
      getClickData(val) {
        this.grade = val.queryType

        this.$refs.table.fetch(true)
      },
      // 获取统计数据
      getCount() {
        caseRateMgr
          .buildingGradeCount(this.exportParams)
          .then((res) => {
            this.topRocerdData = this.orgCheckFlag ? res : {}
          })
          .catch((err) => {
            this.topRocerdData = {}
          })
      },

      searchFun(orgCheck) {
        console.log(orgCheck, Object.keys(orgCheck).length === 0, '444')
        if (Object.keys(orgCheck).length != 0) {
          this.orgCheckFlag = true
          this.orgCheck = {
            ...orgCheck
          }
        } else {
          this.orgCheckFlag = false
        }
        this.$refs.table.fetch(true)
      },
      async onFetch(data) {
        console.log(
          data,
          'data',
          this.orgCheck.orgCompanyId,
          this.orgCheck.orgCompanyId,
          this.orgCheck.orgOfficeId,
          '7777'
        )

        let reg1 = new RegExp('-', 'g')
        this.filterParams = { ...data }
        let params = {
          buildingName: data.housesName,
          ...this.orgCheck,
          ...this.filterParams,
          rankDivisionIds: this.rankDivisionIds,

          buildingIds: this.orgCheck.buildingId ? [this.orgCheck.buildingId] : [],
          companyIds: this.orgCheck.orgCompanyId ? [this.orgCheck.orgCompanyId] : [],
          divisionIds: this.orgCheck.orgDivisionId ? [this.orgCheck.orgDivisionId] : [],
          officeIds: this.orgCheck.orgOfficeId ? [this.orgCheck.orgOfficeId] : [],
          grade: this.grade,
          mth: data.mth.replace(reg1, '')
        }

        this.exportParams = params
        this.getCount()

        return caseRateMgr
          .backgroundList(params)
          .then((res) => {
            return {
              list: this.orgCheckFlag ? res.records : [],
              total: parseInt(res.total)
            }
          })
          .catch((err) => {
            // this.$Message.error(err)
          })
      },

      clearFun(flag = false) {
        this.$refs.table.clearFilter()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .case-integral {
    padding: 20px;

    .export-btn {
      line-height: 30px;
      cursor: pointer;
      color: #2d8cf0;
      text-align: center;
      border-bottom: 1px #e8eaec solid;
    }

    .integral-content {
      width: calc(100% - 270px);

      .org-text {
        margin: 10px 0;
        font-size: 20px;
        font-weight: bold;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
      }

      .base-content {
        margin: 30px 0;

        .base-msg {
          li {
            margin-right: 30px;

            .name {
              color: #666;
            }

            .value {
              font-size: 22px;
              color: #222;
              font-weight: bold;
              text-align: center;
            }
          }

          .selected {
            .name {
              color: #2d8cf0;
            }

            .value {
              color: #2d8cf0;
            }
          }
        }

        .operate-btn {
          margin-right: 30px;

          .ivu-btn-primary {
            margin-left: 8px;
          }
        }
      }
    }
  }

  .tip-text {
    margin: 20px 0;
    color: #a30014;
    font-size: 16px;
  }
  .moText {
    padding: 20px 0;
  }
  .pick {
    text-align: center;
  }
</style>
